<template>
    <el-container>
        <!-- 头部 -->
        <el-header>
            <div class="title">点餐系统</div>
            <el-dropdown @command="click">
                <span style="color: #FFF; font-size: 16px; cursor: pointer;">
                    {{userInfo.userName}}
                </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item>退出登录</el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>
        <el-container>
            <!-- 左边导航栏 -->
            <el-aside width="200px">
                <el-menu
                :default-active="active"
                class="el-menu-vertical-demo"
                background-color="#1d2c3a"
                text-color="#999"
                router
                active-text-color="#fff">
                    <el-menu-item :index="item.path" v-for="(item, index) in menu" :key="index">
                        <i class="el-icon-menu"></i>
                        <span slot="title">{{item.name}}</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 主体内容 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    data() {
        return {
            active: this.$route.path.substr(1),// 判断当前在哪个路由
            userInfo: {},// 用户信息
            menu: [],// 渲染的菜单
            menu1: [ // 管理员菜单
                {
                    path: 'order',
                    name: '订单管理'
                },
                {
                    path: 'dishes',
                    name: '菜品管理'
                },
                {
                    path: 'account',
                    name: '账号管理'
                },
                {
                    path: 'analyse',
                    name: '数据分析'
                },
            ],
            menu2: [// 服务员/配送员菜单
                {
                    path: 'order',
                    name: '订单管理'
                },
                {
                    path: 'dishes',
                    name: '菜品管理'
                }
            ],
            menu3: [// 顾客菜单
                {
                    path: 'menu',
                    name: '菜单'
                },
                {
                    path: 'order',
                    name: '订单管理'
                }
            ],
        }
    },
    mounted () {
        // 页面加载时获取缓存的用户信息
        let userInfo = JSON.parse(window.sessionStorage.getItem('user'))
        this.userInfo = userInfo
        if (userInfo.roleID == 1) {// 根据不同的角色显示不同的菜单
            this.menu = this.menu1
        } else if (userInfo.roleID == 2 || userInfo.roleID == 3) {
            this.menu = this.menu2
        } else {
            this.menu = this.menu3
        }
    },
    methods: {
        click (e) {// 退出登录
            // 清除缓存
            window.sessionStorage.removeItem('token');
            window.sessionStorage.removeItem('user');
            // 跳转到登录页
            this.$router.push('/')
            // 请求退出登录
            this.$http.post('user/logout').then(res => {
                if (res.data.meta.status == 200) {
                    this.$message({
                        type: 'success',
                        message: '退出成功！'
                    })
                }
            })
        }
    }
}
</script>

<style>
/* .element::-webkit-scrollbar { width: 0 !important }
.element { -ms-overflow-style: none; }
.element { overflow: -moz-scrollbars-none; }
::-webkit-scrollbar {
  display: none; 
} */
.el-header {
    display: flex;
    justify-content: space-between;
    height: 200px;
    background: #2b4b6b;
    font-size: 16px;
    color: #FFFFFF;
    line-height: 60px;
}
.el-header .title {
    font-size: 24px;
    font-weight: 700;
}
.el-container {
    height: 100%;
}
.el-aside {
    height: 100%;
    background: #1d2c3a;
}
.el-main {
    height: calc(100vh - 70px);
}
</style>